<template>
	<div class="home">
		<div class="site-content animate">
			<!--文章列表-->
			<md-editor :preview="false"
					   :toolbars="allToolbars"
					   v-model="form.content"
					   style="height: 180px"
					   :onGetCatalog="fun"
					   @onUploadImg="onUploadImg"
					   @onHtmlChanged="onHtmlChange"
			/>
			<div>
				<div style="height: 20px;"></div>
				<el-button style="float: right" @click="create">发布</el-button>
				<el-button style="float: right" @click="login">testLogin</el-button>
			</div>
			<main class="site-main">
				<template v-for="item in postList" :key="item.id">
					<Dynamic v-bind="item"></Dynamic>
				</template>
			</main>
			<!--加载更多-->
			<div class="more" v-show="hasNextPage">
				<div class="more-btn" @click="loadMore">More</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import MdEditor, {HeadList} from 'md-editor-v3';
import axios from "axios";
import Dynamic from "@/components/DynamicPreview.vue";
import request from "@/utils/request";
import {useRouter} from "vue-router";

const router = useRouter();
const features = ref([]);
const currPage = ref(1);
const postList = ref(<any>[]);
const hasNextPage = ref(false);
const loadMore = () => {
	request.get(`dynamic/action/getPage/${currPage.value}`).then((v) => {
		hasNextPage.value = v.data.pages > currPage.value;
		currPage.value++;
		v.data.records.forEach((v: any) => postList.value.push(v))
	});
	
}
loadMore();


const allToolbars = [
	'bold',
	'underline',
	'italic',
	'-',
	'title',
	'strikeThrough',
	'sub',
	'sup',
	'quote',
	'unorderedList',
	'orderedList',
	'-',
	'link',
	'image',
	'-',
	'revoke',
	'next',
	'-',
	'pageFullscreen',
	'fullscreen',
	'preview',
];
const fun = (l: HeadList[]) => {
	l.forEach((i) => console.log(i.text));
}

const form = reactive({
	// 动态标题, 以第一句话为准
	title: '',
	// 动态内容
	content: '',
	// 动态缩略图, 以第一张图片为准, 否则是头像
	banner: '',
	// 动态预览, 前80个字, 超过的话加上'...'
	summary: ''
	// 预想还有个目录, 懒得
})

const htmlText = ref('');

const onHtmlChange = (h: string) => {
	htmlText.value = h;
}

const onUploadImg = async (files: (string | Blob)[], callback: (arg0: any[]) => void) => {
	const res = await Promise.all(
		files.map((file: string | Blob) => {
			console.log(1.1);
			return new Promise((rev, rej) => {
				const form = new FormData();
				form.append('file', file);
				let upload_token = "null";
				form.append("fileName", new Date().getTime().toString());
				request.get("/dynamic/action/getUploadToken").then((res) => {
					upload_token = res.data;
					form.append("token", upload_token);
					axios.post('https://up-z2.qiniup.com', form, {
						headers: {
							'Content-Type': 'multipart/form-data'
						}
					})
						.then((res) => rev(res))
						.catch((error) => rej(error));
				});
			});
		})
	);
	callback(res.map((item: any) => "http://riwc83tf2.hn-bkt.clouddn.com/" + item.data.key));
};

const login = () => request.post("/user/action/login", {
	username: 'test',
	password: 'test'
})

const create = () => {
	const summaryReg = /(?<=>)[^<>]+(?=<)/g;
	const bannerReg = /(?<=!\[.*?]\().+?(?=\))/;
	console.log(htmlText.value);
	form.title = summaryReg.exec(htmlText.value)?.[0] ?? '';
	form.banner = bannerReg.exec(form.content)?.[0] ?? '';
	console.log(htmlText.value.match(summaryReg));
	form.summary = htmlText.value.match(summaryReg)?.join('') ?? '';
	
	if (form.summary.length > 80) {
		form.summary = form.summary.substring(0, 77) + '...';
	}
	request.post('/dynamic/action/create', form).then((r) => {
		router.push(`/dynamic/${r.data.id}`);
	});
}

</script>


<style scoped lang="less">
.home {
	/* header = 80px */
	width: 780px;
}

.site-content {
	.notify {
		margin: 60px 0;
		border-radius: 3px;
		
		& > div {
			padding: 20px;
		}
	}
	
	
	.search-result {
		padding: 15px 20px;
		text-align: center;
		font-size: 20px;
		font-weight: 400;
		border: 1px dashed #ddd;
		color: #828282;
	}
}

.top-feature {
	width: 100%;
	height: auto;
	margin-top: 30px;
	
	.feature-content {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		position: relative;
		
		.feature-item {
			width: 32.9%;
		}
	}
}

.site-main {
	padding-top: 80px;
	
	&.search {
		padding-top: 0;
	}
}

.more {
	margin: 50px 0;
	
	.more-btn {
		width: 100px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #ADADAD;
		border: 1px solid #ADADAD;
		border-radius: 20px;
		margin: 0 auto;
		cursor: pointer;
		
		&:hover {
			color: #8fd0cc;
			border: 1px dashed #8fd0cc;
		}
	}
}

/******/
@media (max-width: 800px) {
	.top-feature {
		display: none;
	}
	
	.site-main {
		padding-top: 40px;
	}
	
	.site-content {
		.notify {
			margin: 30px 0 0 0;
		}
		
		.search-result {
			margin-bottom: 20px;
			font-size: 16px;
		}
	}
}

/******/
</style>